<template>
  <div class="preview">
    <el-dialog
      v-el-drag-dialog
      title="预览"
      :close-on-click-modal="false"
      :visible.sync="dialogVisible"
      center
      width="330px"
      @close="close"
    >
      <div class="preview-inner">
        <el-scrollbar class="inner-scrollbar">
          <h3>{{ title }}</h3>
          <p class="content" v-html="content" />
        </el-scrollbar>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import elDragDialog from '@/directive/el-drag-dialog' // base on element-ui
export default {
  name: 'Preview',
  directives: { elDragDialog },
  props: {
    dialogStatus: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ''
    },
    content: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      dialogVisible: false
    }
  },
  watch: {
    dialogStatus(newValue, oldValue) {
      this.dialogVisible = newValue
    }
  },
  methods: {
    close() {
      this.$emit('onclose')
    }
  }
}
</script>
<style lang="scss">
.preview {
  .el-dialog .el-dialog__body {
    padding: 10px 15px 10px 20px !important;
  }
  .preview-inner {
    min-height: 500px;
    .inner-scrollbar {
      overflow: hidden;
      .el-scrollbar__wrap {
        max-height: 500px;
        margin-bottom: 0 !important;
        overflow-x: hidden;
      }
      .el-scrollbar__view {
        overflow-x: hidden;
      }
      .el-scrollbar__bar {
        right: 0px;
      }
      h3 {
        font-size: 16px;
        font-family: PingFang SC;
        font-weight: bold;
        color: rgba(51, 51, 51, 1);
        line-height: 30px;
        text-align: center;
      }
      .content {
        margin: 0;
        padding: 0;
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 400;
        color: rgba(51, 51, 51, 1);
        line-height: 30px;
        p {
          font-size: 14px;
        }
        img {
          width: 100%;
        }
      }
    }
  }
}
</style>
